import React, { useState } from 'react';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';

const InstructionsSpan = styled.span`
	color: #020514;
	font-family: simsun;
	display: inline-block;
	width: 1.5em;
	vertical-align: bottom;
	overflow: hidden;
	animation: dot 3s infinite step-start;
	@keyframes dot {
		0% {
			width: 0;
			margin-right: 1.5em;
		}
		33% {
			width: 0.5em;
			margin-right: 1em;
		}
		66% {
			width: 1em;
			margin-right: 0.5em;
		}
		100% {
			width: 1.5em;
			margin-right: 0;
		}
	}
`;

const Cover = () => {
	const { t } = useTranslation();

	return (
		<div className="cover-wrapper">
			<p>{t('access-unauthed-page')}</p>
			<p>{t('please-waiting')}<InstructionsSpan>...</InstructionsSpan></p>
			
		</div>
	);
};

export default Cover;
